<script setup lang="ts">
import { ref, watch, watchEffect } from "vue";
import {
  ElAvatar,
  ElButton,
  ElDrawer,
  ElPagination,
  ElTable,
  ElTableColumn,
} from "element-plus";
import useTable from "@/hooks/useTable";

import ApiActivity from "@/api/activity";
import ApiMerchant from "@/api/merchant";


const visible = defineModel<boolean>()

const { ids } = defineProps<{
  ids: string;
}>();

const emits = defineEmits<{
  selection: [event: any[]];
}>();

const fetchUrlMap = {
  id: ApiMerchant.merchantList,
  merchant_id: ApiActivity.activityApplyList,
};

const mode = ref<keyof typeof fetchUrlMap>("id");

const tableRef = ref();
const selectedMap = new Map();
const fetchUrl = ref(fetchUrlMap.id);

const { isFetching, list, search, pagination, execute, onFetchResponse } =
  useTable(fetchUrl, { immediate: false });

onFetchResponse(() => {
  setTimeout(() => {
    list.value.forEach((row) => {
      if (selectedMap.get(row[mode.value])) {
        tableRef.value!.toggleRowSelection(row, true);
      }
    });
  }, 500);
});

const setMapItem = (source: any) => {
  const id = source[mode.value];
  selectedMap.set(id, { id, title: source.merchant_title });
};

watch(visible,(flag)=>{

    if(flag && ids){
        const list = ids.split(",")
        
    }


    
})

// 全选/取消全选
const handleSelectionAll = (selection: any[]) => {
  const isSelected = selection.length > 0;
  (isSelected ? selection : list.value).forEach((e) => {
    if (isSelected) {
      setMapItem(e);
    } else {
      selectedMap.delete(e[mode.value]);
    }
  });
};

// 选中/取消某一项
const handleSelection = (selection: any[], row: any) => {
  selection.forEach(setMapItem);
  const flag = selection.includes(row);
  if (!flag) {
    selectedMap.delete(row[mode.value]);
  }
};

watch(
  () => search.value.act_id,
  (val) => {
    if (val) execute();
  }
);

watchEffect(() => {
  const { value } = mode;

  if (value == "id") {
    search.value = {};
  } else {
    // 已支付
    search.value = {
      audit_status: 1,
      deposit_status: 1,
    };
  }
  fetchUrl.value = fetchUrlMap[mode.value];
  execute();
});

// 确认
const handleConfirmSelection = () =>
  emits("selection", [...selectedMap.values()]);
</script>

<template>
  <ElDrawer size="50%" title="选择品牌" v-model="visible">
    <ElTable
      ref="tableRef"
      :data="list"
      v-loading="isFetching"
      @select="handleSelection"
      @select-all="handleSelectionAll"
    >
      <ElTableColumn type="selection" />
      <ElTableColumn label="品牌LOGO" width="100">
        <template #="{ row }">
          <ElAvatar :src="row.merchant_logo_png" />
        </template>
      </ElTableColumn>

      <ElTableColumn label="品牌名称" prop="merchant_title" />
      <ElTableColumn label="所在地址" prop="merchant_title">
        <template #="{ row }">
          {{ row.city }}
          {{ row.district }}
        </template>
      </ElTableColumn>
    </ElTable>

    <template #footer>
      <div class="flex justify-between">
        <ElButton type="primary" @click="handleConfirmSelection">确认</ElButton>
        <ElPagination v-bind="pagination" />
      </div>
    </template>
  </ElDrawer>
</template>
